<template>

    <div border style="background-color: #f2f2f2;width: 1200px;height: 3900px;align-items: center;margin: 0 auto;">

<div style="height: 50px;width: 1180px;background-color: aqua;align-items: center;margin: 0 auto;margin-top: -50px;">
<h1 style="float: left;">
    &nbsp;溯源管理&nbsp;
</h1>
    <img style="float: left;" src="c:\Users\33140\Documents\Tencent Files\3314076995\nt_qq\nt_data\Pic\2024-09\Ori\f6daf67623fe8759e5f5c437b74fa977.png">
</div>

        <div :style="computedHeight">
            <div style="width: 200px;height: 400px;float: left;margin-left: 20px;margin-top: 20px;">
                <el-image style="width: 200px;height: 200px;" :src="data.tmImage"></el-image>
            </div>

            <div style="width: 940px;float: left;margin-left: 20px;margin-top: 0px;">
                <div style="float: left">
                    <h1 style="font-weight: bold;">{{ data.tmName }}</h1>
                </div>
                <br><br><br>
                <div style="float:left">
                    <h3>生产批次 : {{ data.tmBatch }}</h3>
                </div>
                <div style="float: left;margin-left: 200px;">
                    <h3>保质期 : {{ data.tmExpiration }}天</h3>
                </div>
                <br><br>
                <div style="float:left">
                    <h3>生产许可证号 : {{ data.tmProduction }}</h3>
                </div>
                <div style="float: left;margin-left: 200px;">
                    <h3>生产企业 : {{ data.tmManufacturing }}</h3>
                </div>
                <br><br>
                <div style="float:left">
                    <h2 style="font-weight: bold;">产品检验报告</h2>
                </div>
                <br><br>
                <div style="width: 980px;height: 200px;">
                    
                    <el-upload v-model:file-list="fileList" :action="lis" list-type="picture-card"
                        :on-preview="handlePictureCardPreview" :on-success="handleUploadSuccess"
                        :on-error="handleUploadError" :on-remove="handleRemove">
                        <el-icon><Plus /></el-icon>
                    </el-upload>

                    <el-dialog v-model="dialogVisible">
                        <img w-full style="width: 80%; height: 80%;" :src="dialogImageUrl" alt="Preview Image"/>
                    </el-dialog>

                </div>

            </div>

        </div>

        <div style="background-color: #ffffff;width: 1180px;height: 3250px;align-items: center;margin: 0 auto;margin-top: 20px;">
            <el-tabs v-model="activeTab" style="margin-left: 20px;margin-right: 20px;">
                <el-tab-pane label="养殖信息" name="first">
                    
                    <yz/>
                </el-tab-pane>
                <el-tab-pane label="屠宰信息" name="second">
                    <tz/>
                </el-tab-pane>
                <el-tab-pane label="深加工信息" name="third">
                    <sjg/>
                </el-tab-pane>
            </el-tabs>
        </div>

    </div>


</template>

<script lang="ts" setup>
import yz from '../Cultivation/CultivationInfo.vue'
import tz from '../Slaughter/SlaughterInfo.vue'
import sjg from '../Processing/ProcessingInfo.vue'
import{ref,onMounted,reactive,inject,computed } from 'vue'
import { type AxiosStatic } from 'axios';
const axios=inject('axios') as AxiosStatic
import { ElMessage,ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
const router=useRouter()
const route=useRoute()
const id=route.query.id

onMounted(()=>{
    //console.log(route.query.id,localStorage.getItem('tmid'))
    shows()
})

//默认显示页面
const activeTab=ref('first')

const data=ref([])
const num=ref([])
//图片
const fileList = ref<UploadUserFile[]>([])
//显示
const shows=()=>{
    axios.get('/TraceManage/TraceManageInfo?tmid='+id)
    .then((res)=>{
        //console.log(res.data)
        data.value=res.data
    })
    axios.get('/Images/GetImages?tmid='+id)
    .then((res)=>{
        //console.log(res.data)
        num.value=res.data.length
        if (Array.isArray(res.data)) {
        fileList.value = res.data.map((image) => ({
          name: image.iid || 'default-name.jpeg',  // 根据需要设置图片名称
          url: image.iurl
        }));
      } else {
        console.error('Unexpected response data format:', res.data);
      }
    })
}
const computedHeight=computed(()=> {
    shows()
    return {
        backgroundColor: '#ffffff',
        width: '1180px',
        height: num.value < 6 ? '400px' : '530px', // 直接返回字符串
        alignItems: 'center',
        margin: '0 auto'
      };
    })

const lis = computed(() => {
  return fileList.value.length > 9 ? '' : 'http://182.92.209.50:8001/api/TraceManage/GetImage';
});
// 判断是否禁用上传按钮
//const isUploadDisabled = computed(() => fileList.value.length > 9);
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
//删除图片
const handleRemove: UploadProps['onRemove'] = (url) => {
  console.log(url.name)
    axios.delete('/Images/DelImage?ids='+url.name)
    .then((res)=>{
        console.log(res.data)
        if(num.value==6){
        shows()
    }
    })
}
//预览图片处理事件
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
//上传成功后
const handleUploadSuccess=(url)=>{
  console.log(url)
  axios.post('/Images/AddImage',{
    tMid:id,
    iurl:url,
    addName:"张三"
  })
  .then((res)=>{
    console.log(res.data)
    if(num.value==5){
        shows()
    }
  })
}
//上传失败
const handleUploadError = (err) => {
    shows()
    if(num.value==9){
        ElMessage.error(`最多上传9张图片`);
    }else{
        ElMessage.error(`图片上传失败，请重试！`);
    }
};

</script>